import React from 'react';
class Zuhe extends React.Component{
//在react中的组合类似于vue中的slot，但是在react中没有明确的slot组件
//而是通过数据流props.children来获取组合的内容
//组件可以接受任意元素包括基本数据类型、react元素和函数
    render(){
        console.log(this.props);//打印的结果中有我们要用到的内容
        return(
            <fieldset>
                <legend>组合</legend>
                <h1>组合组件</h1>
                <div className='container'>
                    <div className="header">{this.props.header}</div>
                    <div className="main">{this.props.main}</div>
                    <div className="footer">{this.props.footer}</div>
                </div>
            </fieldset>
        )
    }
}
export default Zuhe